<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="icon" type="image/png" href="./img/favicon.png">
    <link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="css/Toast.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Toast 提示 -->
<div class="toast-container">
    <div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">提示</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body"></div>
    </div>
</div>
<div class="container mt-5">
    <div class="row">
        <!-- 左侧导航 -->
        <div class="col-md-4">
            <div class="list-group">
                <a href="/" class="list-group-item list-group-item-action"><- 返回首页</a>
                <a class="list-group-item list-group-item-action" id="showIntroduction">个人信息</a>
                <a class="list-group-item list-group-item-action" id="changePassword">修改密码</a>
                <a class="list-group-item list-group-item-action" id="changeEmail">修改邮箱</a>
                <a class="list-group-item list-group-item-action" id="changeUsername">修改用户名</a>
                <a class="list-group-item list-group-item-action" id="changeAvatar">修改头像</a>
                <a class="list-group-item list-group-item-action" id="editIntroduction">修改简介</a>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-8">
            <!-- 用户信息展示（默认显示） -->
            <div class="card text-center" id="userInfo">
                <img src="" alt="头像" id="avatar" class="card-img-top rounded-circle mx-auto d-block mt-3"
                     style="width: 150px; height: 150px;">
                <div class="card-body">
                    <h1 class="card-title" id="username"></h1>
                    <p class="card-text" id="email"></p>
                    <p class="card-text" id="role"></p>
                    <p class="card-text" id="introduction"></p>
                    <button class="btn btn-danger" id="exitAccount">退出账户</button>
                </div>
            </div>
            <!-- 修改用户名表单 -->
            <div class="card" id="changeUsernameForm" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">修改用户名</h5>
                    <form>
                        <div class="mb-3">
                            <label for="oldUsername" class="form-label">旧用户名</label>
                            <input type="text" class="form-control" id="oldUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="newUsername" class="form-label">新用户名</label>
                            <input type="text" class="form-control" id="newUsername" required>
                        </div>
                        <button type="submit" class="btn btn-primary" id="ModifyUserName">确认修改</button>
                    </form>
                </div>
            </div>
            <!-- 修改邮箱表单 -->
            <div class="card" id="changeEmailForm" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">修改邮箱</h5>
                    <form>
                        <div class="mb-3">
                            <label for="oldEmail" class="form-label">旧邮箱地址</label>
                            <input type="email" class="form-control" id="oldEmail" required>
                        </div>
                        <div class="mb-3">
                            <label for="newEmail" class="form-label">新邮箱地址</label>
                            <input type="email" class="form-control" id="newEmail" required>
                        </div>
                        <button type="submit" class="btn btn-primary" id="ModifyUserEmail">确认修改</button>
                    </form>
                </div>
            </div>
            <!-- 修改密码表单 -->
            <div class="card" id="changePasswordForm" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">修改密码</h5>
                    <form>
                        <div class="mb-3">
                            <label for="oldPassword" class="form-label">旧密码</label>
                            <input type="password" class="form-control" id="oldPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" required>
                        </div>

                        <button type="submit" id="ConfirmChangePassword" class="btn btn-primary">确认修改</button>
                    </form>
                </div>
            </div>

            <!-- 修改简介表单 -->
            <div class="card" id="editIntroductionForm" style="display: none;">
                <div class="card-body">
                    <h5 class="card-title">修改简介</h5>
                    <form>
                        <div class="mb-3">
                            <label for="newIntroduction" class="form-label">新简介</label>
                            <textarea class="form-control" id="newIntroduction" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary" id="ModifyBiography">确认修改</button>
                    </form>
                </div>
            </div>

            <!-- 修改头像表单 -->
            <div class="card" id="changeAvatarForm" style="display: none;">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">用户头像上传</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="file-upload" class="btn btn-primary">
                                <i class="bi bi-upload"></i> 选择头像文件
                            </label>
                            <input type="file" id="file-upload" accept="image/*" style="display: none;">
                            <p class="instructions">请选择 JPEG 或 PNG 格式的图片文件</p>
                        </div>

                        <div id="preview-container">
                            <div id="crop-area" style="display: none; position: relative;">
                                <h5>原始图片预览</h5>

                                <canvas id="image-preview" style="object-fit: contain;"></canvas>
                                <p class="instructions">拖动裁剪框选择要保留的区域</p>
                            </div>
                        </div>

                        <div id="cropped-preview-container" style="display: none; position: relative;" class="mt-3">
                            <h5>裁剪后预览 (150px × 150px)</h5>
                            <canvas id="croppedResult" class="rounded-circle mb-2"
                                    style="width: 150px; height: 150px;"></canvas>
                        </div>

                        <div class="btn-container">
                            <button id="submit-btn" class="btn btn-primary" disabled>上传并修改头像</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS 和 Popper.js -->
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/personalHomepage/addAllForms.js" type="module"></script>
<script src="./js/personalHomepage/file.js" type="module"></script>
<script src="./js/personalHomepage/addClickEventListener.js" type="module"></script>
</body>
</html>